import React from "react";
import { connect } from "react-redux";
import { loadGetShopListDataAsync } from "@/components/main/index/actionCreator";
import { RecommEnd } from "@/components/main/index/styled";

class ShowList extends React.Component {
  render() {
    var data = this.props.showlist.toJS().list;
    var List = [];
    for (var n in data) {
      List.push(data[n]);
    }
    return (
      <RecommEnd>
        <p>为你推荐</p>
        {List.map((item, index) => (
          <a href={item.url} key={index}>
            <div className="recommend_list">
              <span className="recommend_pic">
                <img src={item.pic} alt={item.name} />
              </span>
              <div className="recommend_content">
                <span className="recommend_time">{item.end_show_time}</span>
                <span className="recommend_name">{item.name}</span>
                <span className="recommend_city">
                  {item.city_name}||{item.venue_name}
                </span>
                <span className="recommend_price">
                  <span className="recommend_price_num">￥{item.min_price}</span>起
                </span>
              </div>
            </div>
          </a>
        ))}
      </RecommEnd>
    );
  }
  componentDidMount() {
    this.props.loadGetShopListDataAsync.bind(this)();
  }
}
const mapStateToProps = state => {
  return {
    currentCity: state.getIn(["indexReducer", "currentCity"]),
    showlist: state.getIn(["indexReducer", "showlist"])
  };
};
const mapDispatchToProps = dispatch => {
  return {
    loadGetShopListDataAsync() {
      loadGetShopListDataAsync(dispatch, {
        city_id: this.props.currentCity.get("city_id")
      });
    }
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(ShowList);
